	<template>
		<scroll-view style="height: 100vh;" scroll-y="true" @scrolltolower ="scrollEnev" >
			<view class="top" v-show="showTop" >
				<!-- #ifndef H5 -->
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<!-- #endif -->
				
				<view class="header">
					<image class="search-catetory" src="../../static/jdimages/category.png" mode="widthFix"></image>
					<uni-search-bar class="search-input" placeholder="请输入你要搜索的关键字" radius="20" clearButton="none"
						cancelButton="none" bgColor="#FFF">
					</uni-search-bar>
					<image class="search-user" src="../../static/jdimages/user.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="content">
				<!-- #ifndef H5 -->
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<!-- #endif -->
				
				<view class="header">
					<image class="search-catetory" src="../../static/jdimages/category.png" mode="widthFix"></image>
					<uni-search-bar class="search-input" placeholder="请输入你要搜索的关键字" radius="20" clearButton="none"
						cancelButton="none" bgColor="#FFF">
					</uni-search-bar>
					<image class="search-user" src="../../static/jdimages/user.png" mode="widthFix"></image>
				</view>
				
				
				<view class="nav">
					<uni-swiper-dot :info="info" style="border-radius: 15px;" :current="current" class="nav-swiper"
						:dots-styles="dotsStyles">
						<swiper @change="change" class="nav-swiper-item">
							<swiper-item>
								<uni-grid :column="5" class="nav-grid" :square="false" :showBorder="false">
									<uni-grid-item class="nav-item" v-for="(item, index) in subItems" :index="index"
										:key="index">
										<view class="nav-content">
											<image :src="item.imageUrl" style="width: 2.5rem;" mode="widthFix"></image>
											<text>{{item.title}}</text>
										</view>
				
									</uni-grid-item>
								</uni-grid>
							</swiper-item>
				
							<swiper-item>
								<uni-grid :column="5" class="nav-grid" :square="false" :showBorder="false">
									<uni-grid-item class="nav-item" v-for="(item, index) in subItems2" :index="index"
										:key="index">
										<view class="nav-content">
											<image :src="item.imageUrl" style="width: 2.5rem;" mode="widthFix"></image>
											<text>{{item.title}}</text>
										</view>
				
									</uni-grid-item>
								</uni-grid>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				
				
				</view>
				
				
				
				<view class="activity">
					<!-- #ifdef H5 -->
					<view class="activity"
						style="background-image: url('../../static/jdimages/activity.png'); background-size: cover;border-radius: 12px;">
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image class="activity-background" src="../../static/jdimages/activity.png" mode="widthFix"></image>
					<!-- #endif -->
				
					<view class="activity-left">
						左侧内容
					</view>
					<scroll-view show-scrollbar="false" scroll-x="true" class="activity-right" style="border-radius: 15px;">
						<view class="activity-item" v-for="(item,index) in activityItems" :key="index" :index="index">
							<view class="activity-item-content">
								<image :src="item.imageUrl" style="width: 3rem;" mode="widthFix"></image>
								<text>{{item.price|getPrice}}</text>
							</view>
						</view>
					</scroll-view>
				
				</view>
				
				
				
				<view class="goods-list">
					<!-- 基于 uni-list 的页面布局 -->
					<uni-list :border="false" :class="{ 'uni-list--waterfall': options.waterfall }">
						<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
						<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
						<uni-list-item class="uni-list-item--waterfall" @click="itemclick" :clickable="true" title="自定义商品列表" v-for="item in goods" :key="item.skuId"
							:to="'/pages/product/detail?id='+item.skuId+'&title='+item.productName">
							<!-- 通过header插槽定义列表左侧图片 -->
							<template v-slot:header>
								<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }" >
									<image v-if="item.images" :src="item.images[0].imagePath" mode="aspectFill" :title="item.images[0].imagePath"></image>
								</view>
							</template>
							<template v-slot:body>
								<view class="shop">
									<view>
										<view class="uni-title">
											<text class="uni-ellipsis-2">{{ item.productName }}</text>
										</view>
										<!-- <view>
											<text class="uni-tag hot-tag">{{ item.goods_tip }}</text>
											<text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
										</view> -->
									</view>
									<view>
										<view class="shop-price">
											<text>¥</text>
											<text class="shop-price-text">{{ item.skuShopPrice }}</text>
											<!-- <text>.00</text> -->
										</view>
										<!-- <view class="uni-note">{{ item.comment_count }}条评论 月销量 {{ item.month_sell_count }} -->
										<!-- </view> -->
										<!-- <view class="uni-note ellipsis"> -->
											<!-- <text class="uni-ellipsis-1">{{ item.shop_name }}</text> -->
											<!-- <text class="uni-link">进店 ></text> -->
										<!-- </view> -->
									</view>
									
									
								</view>
							</template>
							<!-- 通过body插槽定义商品布局 -->
				
						</uni-list-item>
					</uni-list>
				
				</view>
				
				
				
			
			</view>
		</scroll-view>
	</template>

	<script>
		// #ifdef MP-WEIXIN
		import activityData from '../../static/json/index-activity.json'
		// import goodsItems from '../../static/json/goods.json'
		// #endif




		export default {
			data() {
				return {
					inputNumber:0,
					
					tipShow: false,
					keyWord: undefined,
					info: [{
							colorClass: 'uni-bg-red',
							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
							content: '内容 A'
						},
						{
							colorClass: 'uni-bg-green',
							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
							content: '内容 B'
						}
					],
					
					
					subItems: [{
							title: "京东超市",
							imageUrl: "../../static/jdimages/navigator/item_1.png",
						}, {
							title: "京东电器",
							imageUrl: "../../static/jdimages/navigator/item_2.png",
						},
						{
							title: "服饰美妆",
							imageUrl: "../../static/jdimages/navigator/item_3.png",
						},
						{
							title: "充值中心",
							imageUrl: "../../static/jdimages/navigator/item_4.png",
						},
						{
							title: "PLUS会员",
							imageUrl: "../../static/jdimages/navigator/item_5.png",
						}

					],
					subItems2: [{
							title: "京东生鲜",
							imageUrl: "../../static/jdimages/navigator/item_6.png",
						},
						{
							title: "京东国际",
							imageUrl: "../../static/jdimages/navigator/item_7.png",
						},
						{
							title: "京东拍卖",
							imageUrl: "../../static/jdimages/navigator/item_8.png",
						},
						{
							title: "拍拍二手",
							imageUrl: "../../static/jdimages/navigator/item_9.png",
						},
						{
							title: "全部",
							imageUrl: "../../static/jdimages/navigator/item_10.png",
						}
					],
					activityItems: [],
					goods: [],
					dotsStyles: {
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					current: 0,
					options: {
						waterfall: true, // 布局方向切换
						status: 'loading', // 加载状态
					},
					showTop:false,
					pageIndex:1
				}
			},
			filters: {
				getPrice(source) {
					return "￥" + source;
				}
			},
			onLoad() {
				this.loadActivity()
				this.loadGoods()
			},
			
			methods: {
				itemclick(e){
					console.log(e)
				},
				scrollEnev(e) {
					console.log(e)
					// if (e.detail.scrollTop != 0) {
					// 	console.log(e.detail.scrollTop)
					// }
					this.pageIndex+=1;
					this.loadGoods();
				},
				change(e) {
					this.current = e.detail.current
					
				},
				loadActivity() {
					let that = this;
					// #ifdef MP-WEIXIN
					// debugger
					that.activityItems = activityData
					// #endif
					// #ifdef H5
					uni.request({
						url: "/static/json/index-activity.json",
						success(res) {
							for (let item of res.data) {
								that.activityItems.push(item)
							}

						}
					})
					// #endif

				},
				loadGoods() {
					let that = this;
					uni.request({
						url: "http://localhost:8081/product/spu/list",
						data:{pageIndex:that.pageIndex,pageSize:"10"},
						success(res) {
							console.log(res.data)
							for (let item of res.data.records) {
								console.log(item)
								that.goods.push(item)
								// that.goods.push(item)
								// that.goods.push(item)
								// that.goods.push(item)
								// that.goods.push(item)
							}
					
						}
					})

				}
			}
		}
	</script>

	<style lang="scss">
		body {
			background-color: #f4f4f4;
		}

		* {
			cursor: pointer !important;
		}
		
		
		.top{
			position: relative;
		}

		.status_bar {
			height: calc(var(--window-top) + 85px);
			;
			width: 100%;
			// background-color: $uni-bg-color-hover;
			background-color: #ff5454;
		}

		.header {
			background-color: #ff5454;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
		}

		.header .search-catetory,
		.header .search-user {
			flex: 0.13;
		}

		.header .search-input {
			flex: 2;
		}

		.nav {
			background: linear-gradient(180deg, #ff5454 .63%, #f4f4f4 80.65%);
			padding: .3rem .5rem;
		}

		.nav .nav-swiper {
			background-color: #FFF;
		}


		.nav-swiper-item {
			height: 100px;
			/* #ifdef MP-WEIXIN */
			background-color: #FFF;
			border-radius: 15px;
			/* #endif */
		}

		.nav-grid {
			padding: 0.6rem 0.2rem;
		}

		.nav-item {
			text-align: center;
		}

		.nav-item .nav-content {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}


		.activity {
			display: flex;
			align-items: center;
			padding: .1rem .05rem;
			margin: .3rem .5rem;
			text-align: center;
			overflow: hidden;
			position: relative;

			/* #ifdef H5 */
			width: 97%;
			height: 100px;
			margin: .3rem .2rem;

			/* #endif */
		}


		.activity .activity-background {
			width: 100%;
			height: 100%;
			border-radius: inherit;
			/* 继承父容器的圆角 */
			object-fit: cover;
			/* 覆盖整个容器 */
			z-index: -1;
			/* 确保内容覆盖在图片上 */
		}


		.activity .activity-left {
			position: absolute;
			z-index: 1;
			width: 20%;
			height: 100px;
			line-height: 100px;
		}
		

		.activity .activity-right {
			position: absolute;
			z-index: 1;

			/* #ifdef H5 */
			left: 18%;
			width: 80%;
			height: 100px;
			/* #endif */
			/* #ifndef H5 */
			left: 20%;
			width: 79.5%;
			height: 92px;
			/* #endif */

			background-color: #FFF;
			white-space: nowrap;
		}

		.activity .activity-right .activity-item {
			display: inline-block;
			/* #ifdef MP-WEIXIN */
			padding: 1rem .2rem;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			padding: 1rem .5rem;
			/* #endif */
		}

		.activity-item-content {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.activity .activity-right .activity-item .activity-item-content text {
			font-size: 20 px;

		}


		/* 针对Web平台 */
		.activity-right div::-webkit-scrollbar {
			display: none;
			/* 隐藏滚动条 */
		}

		/* 针对其他平台，比如微信小程序，可能需要不同的样式设置 */
		.activity-right div {
			scrollbar-width: none;
			/* 对于微信小程序 */
			-ms-overflow-style: none;
		}



		@import '../../common/uni-ui.scss';

		page {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #efeff4;
			min-height: 100%;
			height: auto;
		}

		.tips {
			color: #67c23a;
			font-size: 14px;
			line-height: 40px;
			text-align: center;
			background-color: #f0f9eb;
			height: 0;
			opacity: 0;
			transform: translateY(-100%);
			transition: all 0.3s;
		}

		.tips-ani {
			transform: translateY(0);
			height: 40px;
			opacity: 1;
		}

		.shop {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.shop-picture {
			width: 110px;
			height: 110px;
		}

		.shop-picture-column {
			width: 100%;
			height: 170px;
			margin-bottom: 10px;
		}

		.shop-price {
			margin-top: 5px;
			font-size: 12px;
			color: #ff5a5f;
		}

		.shop-price-text {
			font-size: 16px;
		}

		.hot-tag {
			background: #ff5a5f;
			border: none;
			color: #fff;
		}

		.button-box {
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			background: #007AFF;
			color: #fff;
		}

		.uni-link {
			flex-shrink: 0;
		}

		.ellipsis {
			display: flex;
			overflow: hidden;
		}

		.uni-ellipsis-1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.uni-ellipsis-2 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.goods-list {
			.uni-list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				// box-sizing: border-box;
				background-color: #efeff4;

				/* #ifdef MP-WEIXIN */
				.uni-list-item--waterfall {
					border-radius: 10px;
					width: 49%;
					box-sizing: border-box;
					background-color: #efeff4;
				}

				/* #endif */

				.uni-list-item {
					margin: .5rem 0rem .5rem .5rem;
					border-radius: 10px;
					/* #ifdef H5 || APP-VUE */
					width: 46%;
					/* #endif */

					box-sizing: border-box;
					background-color: #efeff4;

					.uni-list-item__container {
						flex-direction: column;
						padding: 0;
						padding-bottom: .5rem;

						.uni-ellipsis-2 {
							font-size: 30rpx;
							font-weight: normal;
						}

						.uni-tag,
						.shop-price,
						.uni-ellipsis-2,
						.uni-note,
						{
						margin: 0 .4rem;
					}

				}
			}



		}
		}

		/* #ifdef APP||H5 */
		/deep/ .uni-list-item__container {
			flex-direction: column;
			padding: 0;
			padding-bottom: .5rem;
		}

		/* #endif */
	</style>